Search this book | Previous | Table of contents | Next

Image Mapping

This chapter describes how implement imagemapping on your server.

Imagemapping is one of the unique features of WWW servers and one of the most fun. In a sentence, imagemapping allows you to create a graphic image, display it in your HTML files using the IMG tag and the ISMAP attribute, and assign URLs to different regions of the graphic. Thus, when somebody clicks on parts of the graphic, the point defining where they clicked is sent from the client application to the server. The server passes this information along to an imagemapping CGI program. The imagemapping CGI program "maps" the point to a list of predefined URLs, and finally, the mapped URL is returned to the client in turn "redirecting" the client application to another document.

The imagemap of Europe below illustrates this concept. Each dot is associated with an HTML file containing a graphic, a picture of water from that location. The cartoon balloon and mini speaker are associated with an "about" text and a sound of running water, respectively. Any region that is not a dot nor a graphic is associated with a friendly error message. By clicking on any of the map elements (dots or graphics), your client program (Netscape, for example) sends an (x, y) coordinate to the server who passes it along to a CGI program. The CGI reads its configuration file and maps the point to a URL. This URL is then passed back up the chain to your client application who is automatically sent to a different URL, a URL displaying pictures of bottled water. Give it a try, and hopefully it will be fun!

Imagemapping example - "Waters of Europe"

Implementation

Actually implementing an imagemap is a 5 step process:

Create your graphic
Create an imagemap configuration file
Setup and configure your imagemapping CGI program
Incorporate the graphic into an HTML file
Test

Step #1: Create your graphic

Use your favorite painting or drawing program to create your graphic. Like any other graphics on your server, keep in mind your potential audience. In other words, ask yourself what types of computing platforms might your readers be using and what types of Internet connections may they have. In general, try not to make your graphics too large in terms of file size as well as area. It is a good ideas not to use more than 256 colors in your graphics and make sure the resolution is no more than 72 dots per inch (dpi). Save your graphics as a PICT file, a standard image format available on all Macintosh graphics editing programs.

Step #2: Create an imagemap configuration file

Using either Hyper Mapedit or WebMap (described below), create an imagemap configuration file. In general, you will use these programs to associate regions of the graphic (circles, rectangles, or irregular polygons) with URLs. By selecting their Save option, you will have created the configuration file. It is a good idea to save the configuration files with a .map extension for recognizability.

Step #3: Setup and configure your imagemapping CGI program

The next step is to set up your imagemapping CGI program. Each of the reviewed programs (Mac-ImageMap, or MapServe) have different configuration methods and consequently, these methods are described in each of their respective sections below.

Step #4: Incorporate the graphic into an HTML file

Edit your HTML file to include your graphic. If you haven't done so already, you will have to convert your graphic into a GIF image with a converter program like clip2gif or GIFConverter. When adding the IMG tags to your HTML document, be sure to include the ISMAP attribute so the client applications know to send point coordinates where the user clicked. For example, the tags denoting the inclusion of a graphic in your HTML may look like this:

<IMG SRC="../graphics/water-map.gif" ISMAP>

The IMG denotes a image. The SRC specifies its location. The ISMAP tells the client that the graphic is a clickable map.

Next, you will have to actually make the image hot by applying a CGI anchor to it. This is done almost like any other anchor. Instead of inserting the URL of an HTML document, you insert the URL of your imagemapping CGI program and the imagemap configuration file created in Step #2. For example, suppose you were using MapServe as your CGI program and you had created a configuration file named "water.map", then your HTML code would look something like this:

<A HREF=../scripts/mapserve.cgi$water-map.map><IMG SRC=../graphics/water-map.gif ISMAP></A>

The example can be interpreted this way:

Display the image water-map.gif from the graphics folder
Make the image a link and send any clicks on the image to the program called mapserve.cgi in the scripts folder telling mapserve.cgi to use the configuration file water-map.map.

Note how this example takes advantage of relative URLs.

Step #5: Test

Finally, give your new imagemap a test drive, by accessing your newly created HTML page through your server. It is important to do this because if you don't go through your server, then the point information will never get passed to the CGI application.

Imagemapping software

The programs below will help you automate much of the processes described above.